ReactJS x TypeScript

Create a react app with TypeScript: npx create-react-app my-app --template typescript
You can use a typeto declare types for props.
- https://fettblog.eu/typescript-react/
- you can use the ? on types to

Basic Prop Typing

type blogProps = { title: string, content?: string }
const BlogPost = ({title, content }: blogProps) => <div />
// or
const BlogPost = (props:blogProps) => <div />
// or
const BlogPost: FunctionComponent<BlogProps> = ({ title, content }) => <div/>

Typing Components

Using the generic FunctionComponent allows you to include the optional children prop. However, using React.FunctionComponent is not recommended.
If you need to type the props that you will pass into a component React.HTMLAttribute to define types. Example:
- React.HtmlHTMLAttributes<HTMLButtonElement>
If you are passing in a node, you can use React.ReactNode
If you are passing in a component using the slots pattern, you can use React.ComponentType
If you are passing in a component using the slots pattern with specific props, you can use a ReactHTML above. Example:
- React.ComponentType<React.HtmlHTMLAttributes<HTMLButtonElement>
If you are passing in an event handler, you can use the generic React.ChangeEvent
- Example React.ChangeEvent<HTMLInputElement>

Tags ReactJS, TypeScript